<template>
  <div>
    <div>
      <div class="top">
        <img src="../../assets/bg.png" alt="">
        <span>购物车还是空的</span>
        <span>赶紧买点宝贝犒劳下自己吧</span>
        <van-button to='/' round type="info">去逛逛</van-button>
      </div>
    </div>
    <van-divider :style="{ color: '#333', borderColor: '#dcdee0', padding: '0 16px' }">
      更多精选商品
    </van-divider>
    <more-products />
  </div>
</template>

<script>
import MoreProducts from '../MoreProducts.vue'
export default {
  components: { MoreProducts },

}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
img {
  width: 10rem;
  height: 10rem;
  margin-bottom: 0.8rem;
}
span {
  font-size: 14px;
  margin-bottom: 0.5rem;
}
.van-button--info {
  margin: 0.6rem 0 0.8rem 0;
  width: 5rem;
  height: 2rem;
  background-color: transparent;
  border: 1px solid red;
  color: red;
  padding: 3px;
}
.van-button__content {
  margin-top: 0.3rem;
}
</style>